<template>
    <el-form ref="formRef" :model="form" label-width="100px" class="forgotForm">
        <el-form-item label="密码" prop="password" :rules="[
            {
                required: true,
                message: 'Please input email address',
                trigger: 'blur',
            },
        ]">
            <el-input type="password" v-model="form.password" autocomplete="off" placeholder="Enter Password...">
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="resetPassword(formRef)" type="primary" class="submit-btn">重置密码</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { FormInstance, ElMessage } from "element-plus";
import { ref, defineProps, getCurrentInstance, defineEmits, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
const form = reactive<any>({
    password: ''
})
const route = useRoute();
const router = useRouter();
const proxy = getCurrentInstance() as any;
const formRef = ref<FormInstance>();
//@ts-ignore
//@ts-ignore
const { $axios } = proxy.appContext.config.globalProperties
//找回密码
const resetPassword = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid: boolean) => {
        if (valid) {
            $axios.put(`/api/v1/auth/resetpassword/${route.params.id}`,
                form
            ).then((res: any) => {
                console.log(res);
                if (res.success) {
                    ElMessage.success('密码重置成功！');
                    setTimeout(() => {
                        router.push('/login')
                    }, 1000)
                }
            })
        } else {
            console.log("error submit!!");
            return false;
        }
    });
};
</script>
<style scoped>
.forgotForm {
    width: 50%;
    margin: auto;
    margin-top: 200px;
}
</style>